<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BootStrap</title>
    <!--https://v3.bootcss.com/别人帮我们写好的一大堆的CSS+JavaScript-->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <style>
        .box {
            width: 400px;

            margin-top: 100px;
            margin-left: auto;
            margin-right: auto;
            border: 1px solid #dddddd;
            border-radius: 5px;

            padding-left: 30px;
            padding-right: 30px;
            padding-bottom: 30px;

            -webkit-box-shadow: 10px 10px 10px rgb(0 0 0 / 5%);
            box-shadow: 10px 10px 10px rgb(0 0 0 / 5%);
        }

        .box h2 {
            text-align: center;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<a class="btn btn-primary">点击</a>
<a class="btn btn-danger">点击</a>

<div class="box">
    <h2>用户登录</h2>
    <form>
        <div class="form-group">
            <label for="user">用户名或手机号</label>
            <input type="text" class="form-control" id="user" placeholder="用户名或手机号">
        </div>

        <div class="form-group">
            <label for="pwd">密码</label>
            <input type="password" class="form-control" id="pwd" placeholder="密码">
        </div>

        <input type="submit" class="btn btn-primary" value="登 录"/>
    </form>
</div>

<!--栅格系统 将整个一行分成12份-->
<div>
    <div class="col-sm-4">左边</div>
    <div class="col-sm-4">右边</div>
    <div class="col-sm-4">右边</div>
</div>

<div style="width: 500px;">
    <div class="col-sm-4">左边</div>
    <div class="col-sm-4">右边</div>
    <div class="col-sm-4">右边</div>
</div>

<!--列偏移-->
<div style="width: 500px;">
    <div>
        <div class="col-sm-2">用户名</div>
        <div class="col-sm-10"><input type="text"></div>
    </div>
    <div>
        <div class="col-sm-2">用户名</div>
        <div class="col-sm-10"><input type="text"></div>
    </div>
    <div>
        <div class="col-sm-2">用户名</div>
        <div class="col-sm-10"><input type="text"></div>
    </div>
    <div>
        <div class="col-sm-offset-2 col-sm-10"><input type="button" value="提交"></div>
    </div>
</div>

<div class="container">
    sdfasdf
</div>

<div class="container-fluid">
    sdfasdf
</div>

<!--响应式布局 自适应浏览器大小-->
<!--col-lg-1-->
<!--col-md-1-->
<!--col-sm-1-->

<!--col-xs-1-->
<div style="background-color: #ff6700" class="clearfix">
    <div class="col-sm-2">asdf</div>
    <div class="col-sm-10">asdf</div>
</div>

</body>
</html>